<template>
    <div class="table">
        <el-table :data="props.list" stripe style="width: 100%">
            <el-table-column label="订单编号" min-width="280">
                <template #default="{ row }">
                    <span class="order_code" @click="onOrderDetail(row.orderId)">{{ row.orderSn }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="totalBrokerage" label="佣金" min-width="120">
                <template #default="{ row }">
                    <div v-if="row.benefitMode === 1">{{ row.totalBrokerage || 0 }}积分</div>
                    <div v-else-if="row.benefitMode === 2">{{ row.totalBrokerage ? `¥${row.totalBrokerage}` : 0 }}</div>
                </template>
            </el-table-column>
            <el-table-column label="佣金类型">
                <template #default="{ row }">
                    <div>{{ COMMISSION_TYPE[row.type] }}</div>
                </template>
            </el-table-column>
            <el-table-column label="分销员" width="180">
                <template #default="{ row }">
                    <div>{{ row.dtbNickname || '默认昵称' }}</div>
                    <div>{{ row.dtbMobile }}</div>
                    <div>{{ row.dtbUid }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="shopName" label="(订单)来源店铺" width="120" />
            <el-table-column prop="createdAt" label="创建时间" width="180" />
            <el-table-column label="结算状态" width="100">
                <template #default="{ row }">
                    <div :class="['status', row.status == 2 ? 'red' : '', row.status == 3 ? 'gray' : '']">
                        {{ row.statusName }}
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <ZwOrderDetail ref="ZwOrderDetailRef" />
    </div>
</template>

<script setup>
import constants from '@/commons/constants';
import { ref } from 'vue';
const props = defineProps({
    list: { type: Array, default: () => [] }
});
const COMMISSION_TYPE = constants.COMMISSION_TYPE;
const ZwOrderDetailRef = ref(null);
const onOrderDetail = id => {
    // console.log('onOrderDetail', ZwOrderDetailRef.value.onOpen);
    ZwOrderDetailRef.value.onOpen(id);
};
</script>

<style lang="scss" scoped>
.table {
    .order_code {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff6b00;
        cursor: pointer;
    }
    .status {
        display: flex;
        align-items: center;
        &::before {
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            margin-right: 8px;
            background-color: #ffd500;
            border-radius: 4px;
        }
    }
    .red::before {
        background-color: #ff4a1a;
    }
    .gray::before {
        background-color: #cccccc;
    }
}
</style>
